<template>
  <div class="head" id="head">
    <div class="head-sub">
      <div class="log">
        <router-link to="/HomePage" :title="$t('home.nav.returnIndex')">
          <img src="../../../assets/images/common/logo.png" width="70px" style="margin-top: 7px">
        </router-link>
      </div>
      <router-link to="/homePage/hot" :title="$t('home.nav.hotArticle')">
        <div v-if="this.component == 'hot'"
             @click="navChangeBColor()"
             @mouseover="navOver()"
             @mouseout="navOut()"
             class="nav"
             style="color: rgb(214, 53, 53);">
          {{$t('home.nav.hot')}} <i class="iconfont icon-remen nav-icon" ></i>
        </div>
        <div v-else
             @click="navChangeBColor()"
             @mouseover="navOver()"
             @mouseout="navOut()"
             class="nav">
          {{$t('home.nav.hot')}} <i class="iconfont icon-remen nav-icon" ></i>
        </div>
      </router-link>
      <router-link to="/homePage/error" :title="$t('home.nav.meetError')">
        <div v-if="this.component == 'error'"
             @mouseover="navOver()"
             @mouseout="navOut()"
             style="color: rgb(243, 131, 51)"
             class="nav">
          {{$t('home.nav.error')}} <i class="iconfont icon-error- nav-icon"></i>
        </div>
        <div v-else
             @click="navChangeBColor()"
             @mouseover="navOver()"
             @mouseout="navOut()"
             class="nav">
          {{$t('home.nav.error')}} <i class="iconfont icon-error- nav-icon"></i>
        </div>
      </router-link>
      <router-link to="/homePage/question" :title="$t('home.nav.publishQuestion')">
        <div v-if="this.component == 'question'"
             @click="navChangeBColor()"
             @mouseover="navOver()"
             @mouseout="navOut()"
             style="color: rgb(80,137,243)"
             class="nav">
          {{$t('home.nav.question')}} <i class="iconfont icon-changjianwenti nav-icon"></i>
        </div>
        <div v-else
             @click="navChangeBColor()"
             @mouseover="navOver()"
             @mouseout="navOut()"
             class="nav">
          {{$t('home.nav.question')}} <i class="iconfont icon-changjianwenti nav-icon"></i>
        </div>
      </router-link>
      <router-link to="/homePage/blink" :title="$t('home.nav.publishBlink')">
        <div v-if="this.component == 'blink'"
             @click="navChangeBColor()"
             @mouseover="navOver()"
             @mouseout="navOut()"
             style="color: rgb(0, 173, 0)"
             class="nav">
          {{$t('home.nav.blink')}} <i class="iconfont icon-xiaolian nav-icon"></i>
        </div>
        <div v-else
             @click="navChangeBColor()"
             @mouseover="navOver()"
             @mouseout="navOut()"
             class="nav">
          {{$t('home.nav.blink')}} <i class="iconfont icon-xiaolian nav-icon"></i>
        </div>
      </router-link>
      <a href="javascript:;">
        <div class="search"></div>
      </a>
      <a href="javascript:;" id="news" @mouseover="newsSubShow()" @mouseout="newsSubDisappear()">
        <div class="news">
          <i :title="$t('home.nav.news')" id="news-icon" class="iconfont icon-remind" style="font-size: 30px;">
          </i>
          <div class="news-sub" style="display: none;" id="news-sub">
            <div class="news-sub-top"></div>
            <ul>
              <li style="position: relative">
                <el-link disabled>
                <i class="iconfont icon-xiaoxizhongxin" style="font-size: 19px"></i>
                {{$t('home.nav.myselfNews')}}
                <i class="iconfont icon-tubiaozhizuo-" style="color: rgb(238, 35, 35);position: absolute;left:117px;top:-6px"></i>
                </el-link>
              </li>
              <li style="position: relative">
                <el-link disabled>
                  <i class="iconfont icon-huifu" style="font-size: 22px;"></i>
                  {{$t('home.nav.replyMe')}}
                  <i class="iconfont icon-tubiaozhizuo-" style="color: rgb(238, 35, 35);position: absolute;left:95px;top:-6px"></i>
                </el-link>
              </li>
              <router-link v-if="user.length!=0" to="/chat/chatContent" target="_blank">
                <li style="position: relative">
                  <i class="iconfont icon-sixin" style="font-size: 20px"></i>
                  {{$t('home.nav.letterMe')}}
                </li>
              </router-link>
              <li v-else style="position: relative">
                <el-link disabled>
                  <i class="iconfont icon-sixin" style="font-size: 20px"></i>
                  {{$t('home.nav.letterMe')}}
                </el-link>
              </li>
              <router-link v-if="user.length!=0" to="/userAdminPage/myNews" target="_blank">
                <li style="position: relative" @click="onclickNews">
                  <i class="iconfont icon-tongzhi" style="font-size: 18px"></i>
                  {{$t('home.nav.SystemNotice')}}
                </li>
              </router-link>
              <li v-else style="position: relative" @click="onclickNews">
                <el-link disabled >
                <i class="iconfont icon-tongzhi" style="font-size: 18px"></i>
                  {{$t('home.nav.SystemNotice')}}
                </el-link>
              </li>
            </ul>
          </div>
        </div>
      </a>
      <a href="javascript:;" id="home">
        <div class="home">
<!--           勿删！ -->
          <div v-if="user.length==0">
            <el-tooltip class="item" effect="dark" :content="$t('home.nav.clickLogin')" placement="bottom">
              <div class="headPhoto">
                <router-link to="/loginRegistrationPage">
                  <img src="../../../assets/images/common/not-login.png" alt="" width="26px" style="border-radius: 50%;">
                </router-link>
              </div>
            </el-tooltip>
          </div>
          <div v-else @mouseover="homeSubShow()" @mouseout="homeSubDisappear()">
            <router-link target="_blank" :to="{path:'/userHomePage', query:{ userId : user.userId }}">
              <div class="headPhoto">
                <img  :title="user.userNickname==''? user.userId:user.userNickname" :src="user.userHeadPortrait" alt="" width="26px" style="border-radius: 50%;">
              </div>
            </router-link>
            <div class="home-sub" style="display: none;" id="home-sub">
              <div class="home-sub-top"></div>
              <ul>
                <router-link target="_blank" to="/userAdminPage">
                  <li><i class="iconfont icon-gerenzhongxin" style="font-size: 20px"></i> {{$t('home.nav.personalCenter')}} </li>
                </router-link>
                <router-link target="_blank" to="/userAdminPage/myCollection">
                  <li><i class="iconfont icon-shoucang" style="font-size: 22px"></i> {{$t('home.nav.MyCollect')}} </li>
                </router-link>
                <router-link target="_blank" to="/userAdminPage/myInfo">
                  <li><i class="iconfont icon-shezhi" style="font-size: 22px"></i> {{$t('home.nav.personalSetting')}} </li>
                </router-link>
                <li @click="logout"><i class="iconfont icon-tuichu" style="font-size: 20px"></i> {{$t('home.nav.logout')}} </li>
              </ul>
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
    export default {
        name: "NavHead",
        data() {
            return{
                navigate:[],
                user:'',
                baseURL:"http://localhost:8081/user/query/",
                baseURL2:'http://localhost:8081/loginReg/logout',
                component:''
            }
        },
        mounted(){
            this.login()
        },
        methods:{
            setComponent(val) {
              this.component = val
            },
            login(){
                this.axios.get(this.baseURL).then((res)=>{
                    if (res.data==false){
                        //登录验证不通过
                        this.user = ''
                    }else {//登录成功
                        this.user = res.data
                        localStorage.setItem("userId",res.data.userId)
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            logout(){
                this.axios.post(this.baseURL2).then((res) =>{
                    if (res.data==false){
                        this.failOpt(this.$t('home.nav.logoutFailInfo'))
                    }else {
                        this.$router.push('/loginRegistrationPage/login')
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            onclickNews(){
                // this.$router.push('/homepage') // 跳转首页，不带参数
                // 跳转到首页，并带上登录用户的id
                // this.$router.push({path: '/userAdminPage/myNews', query: {userId: "0000"}})
            },
            navChangeBColor:function () {
                let nav = document.getElementsByClassName("nav")
                let navIcon = document.getElementsByClassName("nav-icon")
                for(let i=0 ;i < nav.length; i++){
                    // event.currentTarget : 当前标签
                    if(event.currentTarget == nav[i]){
                        nav[i].style.backgroundColor = "#rgb(240,240,240)"
                        // nav[i].style.backgroundColor = "#f0f0f0"
                        if (i==0) {
                            nav[i].style.color = "rgb(214, 53, 53)"
                            navIcon[i].style.color = "rgb(214, 53, 53)"
                        }else if (i==1) {
                            nav[i].style.color = "rgb(243, 131, 51)"
                            navIcon[i].style.color = "rgb(243, 131, 51)"
                        }else if (i==2) {
                            nav[i].style.color = "rgb(80,137,243)"
                            navIcon[i].style.color = "rgb(80, 137, 243)"
                        }else {
                            nav[i].style.color = "rgb(0, 173, 0)"
                            navIcon[i].style.color = "rgb(0, 173, 0)"
                        }
                    }else{
                        nav[i].style.backgroundColor = "transparent"
                        nav[i].style.color = "rgb(77,77,77)"
                        navIcon[i].style.color = "rgb(77,77,77)"
                    }
                }
                let timer = setInterval(function () {
                    let heig = parseInt(window.scrollY);
                    if (heig > 0) {
                        window.scrollTo(0, heig-50);
                    }else {
                        clearInterval(timer);
                    }
                }, 1)
            },
            navOver:function(){
                let now = event.currentTarget
                now.style.backgroundColor = "rgba(240,240,240,0.5)"
                // now.style.backgroundColor = "#f0f0f0"
            },
            navOut:function(){
                let now = event.currentTarget
                now.style.backgroundColor = "transparent"

            },
            newsSubShow:function(){
                document.getElementById("news-icon").className="iconfont icon-remind-fill"
                document.getElementById("news-sub").style.display="block"
            },
            newsSubDisappear:function () {
                document.getElementById("news-icon").className="iconfont icon-remind"
                document.getElementById("news-sub").style.display="none"
            },
            homeSubShow:function(){
                if(document.getElementById("home-icon")) document.getElementById("home-icon").className="iconfont icon-addressbook_fill"
                document.getElementById("home-sub").style.display="block"
            },
            homeSubDisappear:function () {
                if(document.getElementById("home-icon")) document.getElementById("home-icon").className="iconfont icon-addressbook"
                document.getElementById("home-sub").style.display="none"
            },
            successOpt(message) {
                this.$notify({
                    title: '成功',
                    message: message,
                    type: 'success'
                })
            },
            failOpt(message) {
                this.$notify.error({
                    title: '错误',
                    message: message
                });
            }
        }
    }
</script>

<style scoped>
  .head{
    height: 55px;
    background-color: #ffffff;
    border-bottom: 1px solid rgb(229, 229, 229);
    position: sticky;
    top: 0px;
    left: 0px;
    letter-spacing: .5px;
    box-shadow: 0 0  10px #b0b0b0;
    background-size: 100% 100%;
    z-index: 999;
  }
  .head-sub{
    width: 1150px;
    height: 55px;
    margin: 0 auto;
  }
  .head-sub div{
    float: left;
  }
  .head .head-sub a div{
    float: left;
    color: rgb(77,77,77);
    font-size: 14px;
  }
  .head-sub .log{
    height: 55px;
    line-height: 55px;
    width: 80px;
  }
  .head-sub .log a strong{
    color: rgb(0, 0, 0);
    font-size: 20px;
  }
  .nav{
    width: 110px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 15px;
    margin-left: 35px;
    margin-top: 12px;
    transition: 0.2s;

  }
  .search{
    height: 20px;
    width: 220px;
    margin-left: 60px;
    margin-top: 13px;
  }
  .search input{
    height: 25px;
  }
  .search input::placeholder{
    font-weight: lighter;
  }
  .search input:nth-child(1){
    height: 27px;
    width: 200px;
    font-size: 15px;
    border: rgb(179, 179, 179) solid 1px;
    background-color: rgb(255, 255, 255);
    padding-left: 10px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;

  }
  .search input:nth-child(2){
    height: 31px;
    width: 50px;
    position: absolute;
    top: 13px;
    border: none;
    color: rgb(248, 248, 248);
    background-color: cadetblue;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  .search input:nth-child(2):hover{
    height: 31px;
    width: 50px;
    position: absolute;
    top: 13px;
    border: none;
    color: rgb(248, 248, 248);
    background-color: #00897B;
  }
  .search input:nth-child(2):active{
    color: rgb(248, 248, 248);
    background-color: #007e71;
  }
  .news{
    margin-left: 120px;
    margin-top: 15px;
    color: #242424;
    position: relative;
  }
  .news-sub{
    width: 150px;
    height: 200px;
    background-color: rgba(255, 255, 255, 1);
    margin-top: 20px;
    position: absolute;
    top: 25px;
    left: -59px;
    box-shadow: 0px 0px 5px rgb(190, 190, 190) ;
    border-radius: 3px;
  }
  .news-sub-top{
    width: 0px;
    height: 0px;
    border: transparent solid 10px;
    border-bottom: rgb(255, 255, 255) solid 10px;
    position: absolute;
    top: -20px;
    left: 65px;

  }
  .news-sub ul{
    position:absolute;
    top: -14px;
    left: -40px;
    overflow: hidden;
  }
  .news-sub li{
    width: 150px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
    color: #3e3e3e;
  }
  .news-sub li:nth-child(1){
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .news-sub li:nth-child(4){
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  .news-sub li:hover{
    background-color: #f7f7f7;
  }
  .home{
    margin-left: 30px;
    margin-top: 16px;

    position: relative;

  }
  .headPhoto{
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #858585;
  }
  .home-sub{
    width: 150px;
    height: 200px;
    background-color: rgba(255, 255, 255, 1);
    /*background-color:rgb(250, 250, 250);*/
    margin-top: 20px;
    position: absolute;
    top: 27px;
    right: -60px;
    box-shadow: 0px 0px 5px rgb(190, 190, 190) ;
    border-radius: 3px;
  }
  .home-sub-top{
    width: 0px;
    height: 0px;
    border: transparent solid 10px;
    border-bottom: rgb(255, 255, 255) solid 10px;
    position: absolute;
    top: -20px;
    left: 65px;

  }
  .home-sub ul{
    position:absolute;
    top: -14px;
    left: -40px;
  }
  .home-sub li{
    width: 150px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
    color: #2f2f2f;
  }
  .home-sub li:hover{
    background-color: #f7f7f7;
  }
  .home-sub li:nth-child(1){
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .news-sub li:nth-child(4){
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }
</style>
